import './option-panel.css'
import { EditorComponent } from '../../editor'

interface IOptionPanelOptions {
  title: string
  data: any
  onConfirm?: (data: any) => void
  onClose?: () => void
}

/**
 * 右侧选项面板组件
 * 从右侧滑出的配置面板，用于显示和编辑JSON格式的配置数据
 */
export class OptionPanel {
  private options: IOptionPanelOptions
  private mask: HTMLDivElement | null
  private panel: HTMLDivElement | null
  private jsonEditor: HTMLTextAreaElement | null
  
  constructor(options: IOptionPanelOptions) {
    this.options = options
    this.mask = null
    this.panel = null
    this.jsonEditor = null
    this._render()
  }
  
  private _render() {
    const { title, data, onConfirm } = this.options
    
    // 渲染遮罩层
    const mask = document.createElement('div')
    mask.classList.add('option-panel-mask')
    mask.setAttribute(EditorComponent.COMPONENT, 'option-panel-mask')
    mask.onclick = () => this.close()
    document.body.append(mask)
    this.mask = mask
    
    // 渲染面板容器
    const panel = document.createElement('div')
    panel.classList.add('option-panel')
    panel.setAttribute(EditorComponent.COMPONENT, 'option-panel')
    document.body.append(panel)
    this.panel = panel
    
    // 标题栏
    const header = document.createElement('div')
    header.classList.add('option-panel-header')
    header.innerHTML = `
      <h3>${title}</h3>
      <i class="close-btn"></i>
    `
    panel.append(header)
    
    // 关闭按钮事件
    const closeBtn = header.querySelector('.close-btn') as HTMLElement
    closeBtn.onclick = () => this.close()
    
    // 内容区域
    const content = document.createElement('div')
    content.classList.add('option-panel-content')
    panel.append(content)
    
    // JSON编辑器
    const jsonEditor = document.createElement('textarea')
    jsonEditor.classList.add('json-editor')
    jsonEditor.value = JSON.stringify(data, null, 2)
    jsonEditor.placeholder = '请输入JSON格式的配置数据'
    content.append(jsonEditor)
    this.jsonEditor = jsonEditor
    
    // 底部按钮区域
    const footer = document.createElement('div')
    footer.classList.add('option-panel-footer')
    footer.innerHTML = `
      <button class="cancel-btn">取消</button>
      <button class="confirm-btn">确定</button>
    `
    panel.append(footer)
    
    // 按钮事件
    const cancelBtn = footer.querySelector('.cancel-btn') as HTMLButtonElement
    cancelBtn.onclick = () => this.close()
    
    const confirmBtn = footer.querySelector('.confirm-btn') as HTMLButtonElement
    confirmBtn.onclick = () => {
      try {
        if (this.jsonEditor) {
          const newData = JSON.parse(this.jsonEditor.value)
          if (onConfirm) {
            onConfirm(newData)
          }
          this.close()
        }
      } catch (error) {
        alert('请输入有效的JSON格式数据')
      }
    }
    
    // 添加动画效果
    setTimeout(() => {
      if (panel && mask) {
        panel.classList.add('open')
        mask.classList.add('show')
      }
    }, 10)
  }
  
  /**
   * 关闭面板
   */
  public close(): void {
    if (this.panel && this.mask) {
      this.panel.classList.remove('open')
      this.mask.classList.remove('show')
      
      setTimeout(() => {
        this._dispose()
        if (this.options.onClose) {
          this.options.onClose()
        }
      }, 300)
    }
  }
  
  /**
   * 销毁面板
   */
  private _dispose(): void {
    this.mask?.remove()
    this.panel?.remove()
    this.mask = null
    this.panel = null
    this.jsonEditor = null
  }
}